<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script>
         $(function(){
             //内部插入  =>  子节点
             //法一
            //  $(".append").click(function(){
            //      //追加在所有子元素后面
            //      $("ul").append(" <li>列表append</li> ");
            //  })
            //  //追加在所有子元素前面
            //  $(".prepend").click(function(){
            //      $("ul").prepend(" <li>列表prepend</li> ");
            //  })
             //法二
            //  $(".append").click(function(){
            //      //追加在所有子元素后面
            //      $(" <li>列表append</li> ").appendTo("ul");
            //  })
            //  //追加在所有子元素前面
            //  $(".prepend").click(function(){
            //      $(" <li>列表prepend</li> ").prependTo("ul");
            //  })


            //外部插入 =>  兄弟节点
            //  $(".before").click(function(){
            //      //在兄弟节点前面
            //     $("ul").before(" <li>列表before</li> ");
            //  })
             
            //  $(".after").click(function(){
            //      //在兄弟节点后面
            //     $("ul").after(" <li>列表after</li> ");
            //  })

            // //包裹 => 父节点
            // $(".wrap").click(function(){   
            //     $("ul").wrap("<div style='color:red'></div>");
            //  })
            // //修改
            // $(".replaceWith").click(function(){   
            //     $("li:first").replaceWith("<li>列表 new</li>");
            //  })

            //删除
            // //清空 内容
            // $(".empty").click(function(){   
            //     $("li:first").empty();
            //  })
            // //移除 标签及内容
            // $(".remove").click(function(){   
            //     $("li:first").remove();
            //  })
            //  //克隆
            //  $(".clone").click(function(){   
            //     $("li:first").clone().appendTo($("ul")); //把第一个克隆到最后
            //  })
             
            //  $("li").click(function(){   
            //      console.log($(this).text());
            //  })
            //  $("ul").on("click","li",function(){   
            //      console.log($(this).text());
            //  })
             $("ul").on("click dbclick","li",function(){   
                 console.log($(this).text());
             })

            //  $("li:first")
            //  $("li:last")
            //  $("li:eq(2)")
            //  $("li").eq(1)

         })
    </script>
</head>
<body> 
    <button class="append" >append </button>
    <button class="prepend" >prepend</button>
    <br>
    <button class="before" >before</button>
    <button class="after" >after</button>
    <br>
    <button class="wrap" >wrap</button>
    <br>
    <button class="replaceWith">replaceWith</button>
    <br>
    <button class="empty">empty </button>
    <button class="remove">remove </button>
    <br>
    <button class="clone">clone </button>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>列表5</li>
    </ul>
</body>
</html>